<template>
  <div class="max-w-6xl mx-auto p-6">
    <!-- 导航栏 -->
    <div class="bg-white rounded-lg shadow-lg mb-6">
      <nav class="flex flex-wrap border-b border-gray-200 overflow-x-auto">
        <button v-for="tab in tabs" :key="tab.id" @click="activeTab = tab.id" :class="[
          'flex-1 min-w-0 py-3 px-2 sm:py-4 sm:px-4 md:px-6 text-center font-medium transition-colors duration-200 text-sm sm:text-base whitespace-nowrap',
          activeTab === tab.id
            ? 'text-blue-600 border-b-2 border-blue-600 bg-blue-50'
            : 'text-gray-600 hover:text-gray-800 hover:bg-gray-50'
        ]">
          <span class="block sm:hidden">{{ tab.name.length > 4 ? tab.name.substring(0, 4) + '...' : tab.name }}</span>
          <span class="hidden sm:block">{{ tab.name }}</span>
        </button>
      </nav>
    </div>
    <!-- 课件资料 Tab -->
    <div v-if="activeTab === 'materials'">
      <MaterialsTab :chapterPath="'/chap04/materials'" :chapterNumber="4" :materials="materialsConfig"
        :showChapterHighlights="true" />
    </div>

    <!-- 视频内容 Tab -->
    <div v-if="activeTab === 'videos'">
      <VideosTab :main-videos="videosConfig.mainVideos" :video-list="videosConfig.videoList"
        :title="videosConfig.title" />
    </div>

    <!-- 示例练习 Tab -->
    <div v-if="activeTab === 'examples'" class="bg-white rounded-lg shadow-lg">
      <ExamplesGrid :examples="examples" :chapterName="'chapter4-examples'" />
    </div>

    <!-- 作业与任务 Tab -->
    <div v-if="activeTab === 'assignments'" class="bg-white rounded-lg shadow-lg">
      <div class="p-6">
        <h2 class="text-2xl font-bold text-gray-800 mb-4">作业与任务</h2>
        <div class="space-y-4">
          <!-- Vue待办事项应用开发作业 -->
          <div class="border border-gray-200 rounded-lg p-6 hover:shadow-md transition-shadow">
            <div class="flex items-start justify-between mb-4">
              <div class="flex-1">
                <h3 class="text-xl font-semibold text-gray-800 mb-2">Vue待办事项应用开发</h3>
                <p class="text-gray-600 mb-3">基于静态HTML页面，使用Vue模板指令和事件处理，开发一个完整的待办事项管理应用</p>
              </div>
              <span class="px-3 py-1 bg-orange-100 text-orange-800 text-sm font-medium rounded-full">
                挑战练习
              </span>
            </div>
            
            <div class="mb-4">
              <h4 class="text-sm font-medium text-gray-700 mb-2">📋 作业要求：</h4>
              <div class="grid grid-cols-1 md:grid-cols-2 gap-2">
                <div class="flex items-center text-sm text-gray-600">
                  <svg class="w-4 h-4 mr-2 text-green-500" fill="currentColor" viewBox="0 0 20 20">
                    <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"></path>
                  </svg>
                  从静态HTML转换为Vue动态应用
                </div>
                <div class="flex items-center text-sm text-gray-600">
                  <svg class="w-4 h-4 mr-2 text-green-500" fill="currentColor" viewBox="0 0 20 20">
                    <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"></path>
                  </svg>
                  实现响应式数据管理和双向绑定
                </div>
                <div class="flex items-center text-sm text-gray-600">
                  <svg class="w-4 h-4 mr-2 text-green-500" fill="currentColor" viewBox="0 0 20 20">
                    <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"></path>
                  </svg>
                  使用Vue模板指令(v-model, v-for, v-if等)
                </div>
                <div class="flex items-center text-sm text-gray-600">
                  <svg class="w-4 h-4 mr-2 text-green-500" fill="currentColor" viewBox="0 0 20 20">
                    <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"></path>
                  </svg>
                  实现事件处理和用户交互功能
                </div>
                <div class="flex items-center text-sm text-gray-600">
                  <svg class="w-4 h-4 mr-2 text-green-500" fill="currentColor" viewBox="0 0 20 20">
                    <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"></path>
                  </svg>
                  添加计算属性和数据持久化
                </div>
                <div class="flex items-center text-sm text-gray-600">
                  <svg class="w-4 h-4 mr-2 text-green-500" fill="currentColor" viewBox="0 0 20 20">
                    <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"></path>
                  </svg>
                  实现主题切换和高级功能
                </div>
              </div>
            </div>
            
            <div class="mb-4 p-4 bg-gradient-to-r from-blue-50 to-indigo-50 border border-blue-200 rounded-lg">
              <h4 class="text-sm font-medium text-blue-800 mb-2 flex items-center">
                <svg class="w-4 h-4 mr-1" fill="currentColor" viewBox="0 0 20 20">
                  <path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z" clip-rule="evenodd"></path>
                </svg>
                💡 开发提示
              </h4>
              <p class="text-sm text-blue-700 mb-2">按照开发指南的6个步骤循序渐进：引入Vue框架 → 响应式数据 → 模板指令 → 事件处理 → 高级功能 → 优化完善</p>
              <p class="text-sm text-blue-700">重点掌握Vue 3 Composition API的setup()函数、ref()响应式数据、computed计算属性和生命周期钩子的使用</p>
            </div>
            
            <div class="mb-4 p-4 bg-gradient-to-r from-green-50 to-emerald-50 border border-green-200 rounded-lg">
              <h4 class="text-sm font-medium text-green-800 mb-2 flex items-center">
                <svg class="w-4 h-4 mr-1" fill="currentColor" viewBox="0 0 20 20">
                  <path fill-rule="evenodd" d="M3 4a1 1 0 011-1h12a1 1 0 011 1v2a1 1 0 01-1 1H4a1 1 0 01-1-1V4zM3 10a1 1 0 011-1h6a1 1 0 011 1v6a1 1 0 01-1 1H4a1 1 0 01-1-1v-6zM14 9a1 1 0 00-1 1v6a1 1 0 001 1h2a1 1 0 001-1v-6a1 1 0 00-1-1h-2z" clip-rule="evenodd"></path>
                </svg>
                📁 项目文件
              </h4>
              <div class="space-y-2">
                <div class="flex items-center text-sm text-green-700">
                  <svg class="w-4 h-4 mr-2" fill="currentColor" viewBox="0 0 20 20">
                    <path fill-rule="evenodd" d="M4 4a2 2 0 012-2h4.586A2 2 0 0112 2.586L15.414 6A2 2 0 0116 7.414V16a2 2 0 01-2 2H6a2 2 0 01-2-2V4z" clip-rule="evenodd"></path>
                  </svg>
                  <strong>起始代码：</strong> 3.1-static.html (完全静态的HTML页面)
                </div>
                <div class="flex items-center text-sm text-green-700">
                  <svg class="w-4 h-4 mr-2" fill="currentColor" viewBox="0 0 20 20">
                    <path fill-rule="evenodd" d="M4 4a2 2 0 012-2h4.586A2 2 0 0112 2.586L15.414 6A2 2 0 0116 7.414V16a2 2 0 01-2 2H6a2 2 0 01-2-2V4z" clip-rule="evenodd"></path>
                  </svg>
                  <strong>开发指南：</strong> dev.md (详细的6步开发教程)
                </div>
                <div class="flex items-center text-sm text-green-700">
                  <svg class="w-4 h-4 mr-2" fill="currentColor" viewBox="0 0 20 20">
                    <path fill-rule="evenodd" d="M4 4a2 2 0 012-2h4.586A2 2 0 0112 2.586L15.414 6A2 2 0 0116 7.414V16a2 2 0 01-2 2H6a2 2 0 01-2-2V4z" clip-rule="evenodd"></path>
                  </svg>
                  <strong>参考答案：</strong> 3.1-task.html (完整的Vue动态应用)
                </div>
              </div>
            </div>
            
            <div class="mb-4 p-4 bg-gradient-to-r from-yellow-50 to-amber-50 border border-yellow-200 rounded-lg">
              <h4 class="text-sm font-medium text-yellow-800 mb-2 flex items-center">
                <svg class="w-4 h-4 mr-1" fill="currentColor" viewBox="0 0 20 20">
                  <path fill-rule="evenodd" d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z" clip-rule="evenodd"></path>
                </svg>
                ⚡ 评分标准
              </h4>
              <div class="grid grid-cols-1 md:grid-cols-2 gap-2">
                <div class="text-sm text-yellow-700">• Vue框架正确引入和应用创建 (15分)</div>
                <div class="text-sm text-yellow-700">• 响应式数据定义和使用 (20分)</div>
                <div class="text-sm text-yellow-700">• 模板指令正确应用 (25分)</div>
                <div class="text-sm text-yellow-700">• 事件处理和用户交互 (20分)</div>
                <div class="text-sm text-yellow-700">• 计算属性和高级功能 (15分)</div>
                <div class="text-sm text-yellow-700">• 代码质量和最佳实践 (5分)</div>
              </div>
            </div>
            
            <div class="flex items-center justify-between">
              <div class="flex items-center space-x-4">
                <button 
                  @click="viewStaticReference"
                  class="flex items-center px-4 py-2 bg-gray-500 hover:bg-gray-600 text-white text-sm rounded-lg transition-colors"
                >
                  <svg class="w-4 h-4 mr-1" fill="currentColor" viewBox="0 0 20 20">
                    <path d="M10 12a2 2 0 100-4 2 2 0 000 4z"></path>
                    <path fill-rule="evenodd" d="M.458 10C1.732 5.943 5.522 3 10 3s8.268 2.943 9.542 7c-1.274 4.057-5.064 7-9.542 7S1.732 14.057.458 10zM14 10a4 4 0 11-8 0 4 4 0 018 0z" clip-rule="evenodd"></path>
                  </svg>
                  查看起始代码
                </button>
                <button 
                  @click="viewDevGuide"
                  class="flex items-center px-4 py-2 bg-blue-500 hover:bg-blue-600 text-white text-sm rounded-lg transition-colors"
                >
                  <svg class="w-4 h-4 mr-1" fill="currentColor" viewBox="0 0 20 20">
                    <path fill-rule="evenodd" d="M4 4a2 2 0 012-2h4.586A2 2 0 0112 2.586L15.414 6A2 2 0 0116 7.414V16a2 2 0 01-2 2H6a2 2 0 01-2-2V4zm2 6a1 1 0 011-1h6a1 1 0 110 2H7a1 1 0 01-1-1zm1 3a1 1 0 100 2h6a1 1 0 100-2H7z" clip-rule="evenodd"></path>
                  </svg>
                  查看开发指南
                </button>
                <!-- <button 
                  @click="viewTaskReference"
                  class="flex items-center px-4 py-2 bg-purple-500 hover:bg-purple-600 text-white text-sm rounded-lg transition-colors"
                >
                  <svg class="w-4 h-4 mr-1" fill="currentColor" viewBox="0 0 20 20">
                    <path d="M10 12a2 2 0 100-4 2 2 0 000 4z"></path>
                    <path fill-rule="evenodd" d="M.458 10C1.732 5.943 5.522 3 10 3s8.268 2.943 9.542 7c-1.274 4.057-5.064 7-9.542 7S1.732 14.057.458 10zM14 10a4 4 0 11-8 0 4 4 0 018 0z" clip-rule="evenodd"></path>
                  </svg>
                  查看参考答案
                </button> -->
                <div class="text-sm text-gray-500">
                  <span class="flex items-center">
                    <svg class="w-4 h-4 mr-1" fill="currentColor" viewBox="0 0 20 20">
                      <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm1-12a1 1 0 10-2 0v4a1 1 0 00.293.707l2.828 2.829a1 1 0 101.415-1.415L11 9.586V6z" clip-rule="evenodd"></path>
                    </svg>
                    截止时间：课程结束后一周
                  </span>
                </div>
              </div>
              <button 
                @click="startVueTaskAssignment"
                class="flex items-center px-6 py-2 bg-green-500 hover:bg-green-600 text-white font-medium rounded-lg transition-colors transform hover:scale-105"
              >
                <svg class="w-4 h-4 mr-2" fill="currentColor" viewBox="0 0 20 20">
                  <path fill-rule="evenodd" d="M10 3a1 1 0 011 1v5h5a1 1 0 110 2h-5v5a1 1 0 11-2 0v-5H4a1 1 0 110-2h5V4a1 1 0 011-1z" clip-rule="evenodd"></path>
                </svg>
                开始编程
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <!-- 开发指南模态框 -->
  <div v-if="isDevGuideVisible" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50" @click="closeDevGuide">
    <div class="bg-white rounded-lg shadow-xl max-w-4xl w-full mx-4 max-h-[90vh] overflow-hidden" @click.stop>
      <div class="flex items-center justify-between p-6 border-b">
        <h2 class="text-xl font-semibold text-gray-800">开发指南</h2>
        <button @click="closeDevGuide" class="text-gray-400 hover:text-gray-600">
          <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
          </svg>
        </button>
      </div>
      <div class="p-6 overflow-y-auto max-h-[calc(90vh-120px)]">
        <div v-if="isLoadingDevGuide" class="flex items-center justify-center py-8">
          <div class="animate-spin rounded-full h-8 w-8 border-b-2 border-blue-600"></div>
          <span class="ml-2 text-gray-600">正在加载开发指南...</span>
        </div>
        <div v-else-if="devGuideError" class="text-red-600 text-center py-8">
          {{ devGuideError }}
        </div>
        <div v-else class="prose max-w-none" v-html="devGuideContent"></div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, nextTick, watch } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { useAssignmentStore } from '@/stores/assignment'
import { marked } from 'marked'
import MaterialsTab from '@/components/MaterialsTab.vue'
import VideosTab from '@/components/VideosTab.vue'
import ExamplesGrid from '@/components/ExamplesGrid.vue'

const route = useRoute()
const router = useRouter()
const assignmentStore = useAssignmentStore()

// Vue待办事项应用开发作业配置
const vueTaskAssignment = {
  id: 4001,
  title: 'Vue待办事项应用开发',
  description: '基于静态HTML页面，使用Vue模板指令和事件处理，开发一个完整的待办事项管理应用',
  difficulty: 'medium' as const,
  estimatedTime: '2-3小时',
  files: {
    starter: '/chap04/tasks/3.1-static.html',
    guide: '/chap04/tasks/dev.md',
    reference: '/chap04/tasks/3.1-task.html'
  }
}

interface Example {
  id: string
  title: string
  description: string
  type: string
  difficulty: 'easy' | 'medium' | 'hard'
  estimatedTime: string
  hour: number
  filePath: string
  fileName: string
}

interface Tab {
  id: string
  name: string
}

interface OutlineItem {
  id: string
  text: string
  level: number
}

// Tab 相关状态
const activeTab = ref('materials')
const tabs: Tab[] = [
  { id: 'materials', name: '课件资料' },
  { id: 'videos', name: '视 频' },
  { id: 'examples', name: '示 例' },
  { id: 'assignments', name: '作业与任务' }
]

// 目录相关状态
const documentOutline = ref<OutlineItem[]>([])

// 开发指南相关状态
const isDevGuideVisible = ref(false)
const devGuideContent = ref('')
const isLoadingDevGuide = ref(false)
const devGuideError = ref('')

// 材料配置
const materialsConfig = [
  {
    type: 'pdf',
    title: '第4章课件',
    description: 'Vue模板应用相关的PDF课件资料',
    icon: 'red',
    files: ['/第4章-Vue模板应用.pdf']
  },
  {
    type: 'docx',
    title: '第4章讲义',
    description: 'Vue模板应用详细讲义文档',
    icon: 'green',
    files: ['/第4章-Vue模板应用.docx']
  }
]

// 视频配置
const videosConfig = {
  title: '第4章 Vue模板应用视频教程',
  mainVideos: [
    {
      id: 'chap4-main1',
      title: '4.1模板插值',
      url: '/chap04/videos/4.1模板插值.mp4',
      description: 'Vue模板语法'
    },
    {
      id: 'chap4-main2',
      title: '4.2v-model表单元素绑定',
      url: '/chap04/videos/4.2v-model表单元素绑定.mp4',
      description: 'Vue表单双向数据绑定'
    },
    {
      id: 'chap4-main3',
      title: '4.3v-on事件绑定',
      url: '/chap04/videos/4.3v-on事件绑定.mp4',
      description: 'Vue事件处理和绑定'
    },
    {
      id: 'chap4-main4',
      title: '4.4v-if条件渲染指令',
      url: '/chap04/videos/4.4v-if条件渲染指令.mp4',
      description: 'Vue条件渲染指令详解'
    },
    {
      id: 'chap4-main5',
      title: '4.5v-for循环渲染',
      url: '/chap04/videos/4.5v-for循环渲染.mp4',
      description: 'Vue循环渲染指令详解'
    },
    {
      id: 'chap4-main6',
      title: '4.6v-bind一般属性绑定',
      url: '/chap04/videos/4.6v-bind一般属性绑定.mp4',
      description: 'Vue属性绑定指令详解'
    },
    {
      id: 'chap4-main7',
      title: '4.7v-bind-class-style绑定',
      url: '/chap04/videos/4.7v-bind-class-style绑定.mp4',
      description: 'Vue样式和类绑定详解'
    }
  ],
  videoList: [
    {
      id: 'chap4-1',
      title: 'Vue模板插值',
      description: '双大括号插值和指令基础',
      duration: '12:30',
      views: '1.5k',
      url: '/chap04/videos/4.1模板插值.mp4'
    },
    {
      id: 'chap4-2',
      title: '4.2v-model表单元素绑定',
      description: 'Vue表单双向数据绑定，v-model指令详解',
      duration: '15:45',
      views: '1.2k',
      url: '/chap04/videos/4.2v-model表单元素绑定.mp4'
    },
    {
      id: 'chap4-3',
      title: '4.3v-on事件绑定',
      description: 'Vue事件处理机制，v-on指令和事件修饰符',
      duration: '18:20',
      views: '1.3k',
      url: '/chap04/videos/4.3v-on事件绑定.mp4'
    },
    {
      id: 'chap4-4',
      title: '4.4v-if条件渲染指令',
      description: 'Vue条件渲染指令，v-if、v-else-if、v-else的使用',
      duration: '16:40',
      views: '1.1k',
      url: '/chap04/videos/4.4v-if条件渲染指令.mp4'
    },
    {
      id: 'chap4-5',
      title: '4.5v-for循环渲染',
      description: 'Vue循环渲染指令，v-for的使用和key属性的重要性',
      duration: '18:30',
      views: '1.0k',
      url: '/chap04/videos/4.5v-for循环渲染.mp4'
    },
    {
      id: 'chap4-6',
      title: '4.6v-bind一般属性绑定',
      description: 'Vue属性绑定指令，v-bind的基础使用和动态属性绑定',
      duration: '16:20',
      views: '950',
      url: '/chap04/videos/4.6v-bind一般属性绑定.mp4'
    },
    {
      id: 'chap4-7',
      title: '4.7v-bind-class-style绑定',
      description: 'Vue样式绑定，class和style的动态绑定技巧',
      duration: '20:15',
      views: '1.1k',
      url: '/chap04/videos/4.7v-bind-class-style绑定.mp4'
    }
  ]
}

const examples = ref<Example[]>([
  // 第1学时 - Vue模板插值
  {
    id: '11',
    title: '1学时-Vue模板插值基础',
    description: '学习双大括号插值、v-text、v-html和v-once指令的使用',
    type: '模板语法',
    difficulty: 'easy',
    estimatedTime: '15分钟',
    hour: 1,
    filePath: '/chap04/1/4.1.html',
    fileName: '4.1.html'
  },
  {
    id: '12',
    title: '1学时-Vue模板插值基础-专业版',
    description: '学习双大括号插值、v-text、v-html和v-once指令的使用',
    type: '模板语法',
    difficulty: 'easy',
    estimatedTime: '15分钟',
    hour: 1,
    filePath: '/chap04/1/4.1p.html',
    fileName: '4.1p.html'
  },
  {
    id: '13',
    title: '1学时-表单元素v-model数据双向绑定',
    description: '使用v-model实现表单双向数据绑定，包含文本输入和单选按钮',
    type: '表单绑定',
    difficulty: 'easy',
    estimatedTime: '20分钟',
    hour: 1,
    filePath: '/chap04/1/4.2p.html',
    fileName: '4.2p.html'
  },
  // 第2学时 - Vue事件绑定
  {
    id: '21',
    title: '2学时-Vue事件绑定基础',
    description: '学习v-on指令和@简写语法，掌握事件处理器的使用',
    type: '事件处理',
    difficulty: 'easy',
    estimatedTime: '18分钟',
    hour: 2,
    filePath: '/chap04/2/4.1.html',
    fileName: '4.1.html'
  },
  {
    id: '22',
    title: '2学时-事件修饰符演示',
    description: '学习.stop、.prevent、.once等事件修饰符的使用',
    type: '事件修饰符',
    difficulty: 'medium',
    estimatedTime: '25分钟',
    hour: 2,
    filePath: '/chap04/2/4.2.html',
    fileName: '4.2.html'
  },

  // 第3学时 - Vue条件渲染
  {
    id: '31',
    title: '3学时-Vue条件渲染',
    description: '掌握v-if、v-else-if、v-else的使用，理解条件渲染机制,学习v-show指令，理解与v-if的区别和使用场景',
    type: '条件渲染',
    difficulty: 'easy',
    estimatedTime: '20分钟',
    hour: 3,
    filePath: '/chap04/3/4.1.html',
    fileName: '4.1.html'
  },
  {
    id: '32',
    title: '3学时-循环渲染v-for',
    description: '学习v-for指令，掌握循环渲染机制',
    type: '循环渲染',
    difficulty: 'medium',
    estimatedTime: '22分钟',
    hour: 3,
    filePath: '/chap04/3/4.2.html',
    fileName: '4.2.html'
  },
  {
    id: '42',
    title: '4学时-Vue属性绑定基础',
    description: '学习v-bind指令，掌握动态属性绑定的各种用法',
    type: '属性绑定',
    difficulty: 'medium',
    estimatedTime: '25分钟',
    hour: 4,
    filePath: '/chap04/4/4.1.html',
    fileName: '4.1.html'
  },
  {
    id: '43',
    title: '4学时-Vue样式绑定',
    description: '学习动态样式绑定、CSS变量和响应式样式',
    type: '样式绑定',
    difficulty: 'medium',
    estimatedTime: '30分钟',
    hour: 4,
    filePath: '/chap04/4/4.2.html',
    fileName: '4.2.html'
  },
])

const generateOutline = () => {
  const headings = document.querySelectorAll('h1, h2, h3, h4, h5, h6')
  documentOutline.value = Array.from(headings).map((heading, index) => ({
    id: heading.id || `heading-${index}`,
    text: heading.textContent || '',
    level: parseInt(heading.tagName.charAt(1))
  }))
}

// 处理路由参数，激活指定的标签页
const handleRouteParams = () => {
  const tab = route.query.tab as string
  if (tab && tabs.some(t => t.id === tab)) {
    activeTab.value = tab
  }
}

// 监听路由变化
watch(() => route.query.tab, () => {
  handleRouteParams()
})

// 作业相关方法
const viewStaticReference = () => {
  window.open(vueTaskAssignment.files.starter, '_blank')
}

const viewDevGuide = async () => {
  isDevGuideVisible.value = true
  
  if (devGuideContent.value) {
    return // 已经加载过内容
  }
  
  isLoadingDevGuide.value = true
  devGuideError.value = ''
  
  try {
    const response = await fetch(vueTaskAssignment.files.guide)
    if (!response.ok) {
      throw new Error(`HTTP error! status: ${response.status}`)
    }
    const markdownText = await response.text()
    devGuideContent.value = await marked(markdownText)
  } catch (error: any) {
    console.error('Failed to load dev guide:', error)
    devGuideError.value = `加载开发指南失败: ${error.message}`
  } finally {
    isLoadingDevGuide.value = false
  }
}

const closeDevGuide = () => {
  isDevGuideVisible.value = false
}

const viewTaskReference = () => {
  window.open(vueTaskAssignment.files.reference, '_blank')
}

const startVueTaskAssignment = () => {
  // 启动Vue待办事项应用开发作业，从静态HTML模板开始
  assignmentStore.setCurrentExample({
    id: 'vue-todo-assignment',
    title: vueTaskAssignment.title,
    description: vueTaskAssignment.description,
    content: '', // 将通过filePath加载基础模板
    filePath: '/chap04/tasks/3.1-static.html',
    fileName: '3.1-static.html'
  }, 'chapter4-examples')
  
  // 同时设置作业信息用于评分等功能，保持sourceType不变
  assignmentStore.setCurrentAssignment({
    id: vueTaskAssignment.id,
    title: vueTaskAssignment.title,
    description: vueTaskAssignment.description,
    difficulty: vueTaskAssignment.difficulty,
    estimatedTime: vueTaskAssignment.estimatedTime
  }, true)
  router.push('/editor')
}

// 生命周期
onMounted(() => {
  handleRouteParams()
  nextTick(() => {
    generateOutline()
  })
})

// 在 <script setup> 中，所有的变量和函数都会自动暴露给模板
// 不需要 return 语句
</script>

<style scoped>
.example-card {
  transition: all 0.3s ease;
}

.example-card:hover {
  transform: translateY(-2px);
}

.difficulty-easy {
  @apply bg-green-100 text-green-800;
}

.difficulty-medium {
  @apply bg-yellow-100 text-yellow-800;
}

.difficulty-hard {
  @apply bg-red-100 text-red-800;
}

/* 视频容器样式 */
.video-container {
  position: relative;
  width: 100%;
  height: 0;
  padding-bottom: 56.25%;
  /* 16:9 宽高比 */
  background: #000;
  border-radius: 8px;
  overflow: hidden;
}

.video-container video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* DOCX 预览区域样式 */
#docx-viewer-content :deep(h1),
#docx-viewer-content :deep(h2),
#docx-viewer-content :deep(h3),
#docx-viewer-content :deep(h4),
#docx-viewer-content :deep(h5),
#docx-viewer-content :deep(h6) {
  margin-top: 1.5rem;
  margin-bottom: 1rem;
  font-weight: 600;
  line-height: 1.25;
}

#docx-viewer-content :deep(h1) {
  font-size: 2rem;
}

#docx-viewer-content :deep(h2) {
  font-size: 1.75rem;
}

#docx-viewer-content :deep(h3) {
  font-size: 1.5rem;
}

#docx-viewer-content :deep(h4) {
  font-size: 1.25rem;
}

#docx-viewer-content :deep(h5) {
  font-size: 1.125rem;
}

#docx-viewer-content :deep(h6) {
  font-size: 1rem;
}

#docx-viewer-content :deep(table) {
  width: 100%;
  border-collapse: collapse;
  margin: 1rem 0;
}

#docx-viewer-content :deep(table th),
#docx-viewer-content :deep(table td) {
  border: 1px solid #d1d5db;
  padding: 0.5rem;
  text-align: left;
}

#docx-viewer-content :deep(table th) {
  background-color: #f9fafb;
  font-weight: 600;
}

/* 自定义滚动条 */
.overflow-y-auto::-webkit-scrollbar {
  width: 6px;
}

.overflow-y-auto::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 3px;
}

.overflow-y-auto::-webkit-scrollbar-thumb {
  background: #c1c1c1;
  border-radius: 3px;
}

.overflow-y-auto::-webkit-scrollbar-thumb:hover {
  background: #a8a8a8;
}

/* 目录导航样式 */
.writing-mode-vertical-rl {
  writing-mode: vertical-rl;
}

.text-orientation-mixed {
  text-orientation: mixed;
}

/* 开发指南样式 */
.prose :deep(h1),
.prose :deep(h2),
.prose :deep(h3),
.prose :deep(h4),
.prose :deep(h5),
.prose :deep(h6) {
  margin-top: 1.5rem;
  margin-bottom: 1rem;
  font-weight: 600;
  line-height: 1.25;
}

.prose :deep(h1) {
  font-size: 2rem;
  color: #1f2937;
}

.prose :deep(h2) {
  font-size: 1.75rem;
  color: #374151;
}

.prose :deep(h3) {
  font-size: 1.5rem;
  color: #4b5563;
}

.prose :deep(pre) {
  background-color: #f3f4f6;
  border-radius: 0.5rem;
  padding: 1rem;
  overflow-x: auto;
  margin: 1rem 0;
}

.prose :deep(code) {
  background-color: #f3f4f6;
  padding: 0.25rem 0.5rem;
  border-radius: 0.25rem;
  font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
}

.prose :deep(pre code) {
  background-color: transparent;
  padding: 0;
}

.prose :deep(ul),
.prose :deep(ol) {
  margin: 1rem 0;
  padding-left: 1.5rem;
}

.prose :deep(li) {
  margin: 0.5rem 0;
}

.prose :deep(p) {
  margin: 1rem 0;
  line-height: 1.6;
}

.prose :deep(blockquote) {
  border-left: 4px solid #3b82f6;
  padding-left: 1rem;
  margin: 1rem 0;
  background-color: #f8fafc;
  padding: 1rem;
  border-radius: 0.25rem;
}

.prose :deep(table) {
  width: 100%;
  border-collapse: collapse;
  margin: 1rem 0;
}

.prose :deep(table th),
.prose :deep(table td) {
  border: 1px solid #d1d5db;
  padding: 0.5rem;
  text-align: left;
}

.prose :deep(table th) {
  background-color: #f9fafb;
  font-weight: 600;
}
</style>